import { class_esy, CloseOutlined, CopyOutlined, copyText, Dialog, Obj, QRCode, Toast } from 'esy-ui';
import { useCallback, useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useFormatText } from '@/hooks';
import { postAgentInviteLink, postAgentRebatePanel } from '@/services';
import { useUserInfoStore } from '@/mobx';
import png01 from '@/assets/images/common/bonus-1.png';
import png04 from '@/assets/images/common/bonus-4.png';
import bgPng01 from '@/assets/images/common/invite-qr-bg.png';
import { Img } from '@/components';

const cards = [
  {
    tKey: 'text_151',
    vKey: 'DirectProfit',
    cls: 'bg-lg-6',
  },
  {
    tKey: 'text_152',
    vKey: 'DirectProfit_YES',
    cls: 'bg-lg-7',
  },
  {
    tKey: 'text_153',
    vKey: 'InviteCount',
    cls: 'bg-lg-7',
  },
  {
    tKey: 'text_154',
    vKey: 'EffCount',
    cls: 'bg-lg-6',
  },
];

function AllInfo() {
  const { text } = useFormatText();
  const { userInfo } = useUserInfoStore();
  const [info, setInfo] = useState<Obj>({});
  const [inviteUrl, setInviteUrl] = useState('');
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (userInfo?.Token) {
      postAgentRebatePanel({})
        .then((res: any) => {
          setInfo(res?.Data);
        })
        .catch(() => {});
    }
  }, [userInfo?.Token]);

  useEffect(() => {
    if (userInfo?.Token) {
      postAgentInviteLink({})
        .then((res: any) => {
          setInviteUrl(res?.Data);
        })
        .catch(() => {});
    }
  }, [userInfo?.Token]);

  const onCopy = () => {
    if (inviteUrl) {
      copyText(inviteUrl)
        .then(() => {
          Toast.show({ content: text('text_158') });
        })
        .catch(() => {
          Toast.show({ content: text('text_159') });
        });
    } else {
      Toast.show({ content: text('text_160') });
    }
  };

  const onOpen = () => {
    setOpen(true);
  };

  const onClose = useCallback(() => {
    setOpen(false);
  }, []);

  return (
    <div className='w-full h-tab-1 inline-block align-top overflow-y-auto px-2 py-2'>
      <div className='flex flex-wrap items-center text-white'>
        {cards.map((it, i) => (
          <div key={it.tKey} className='w-1/2'>
            <div className={class_esy(['m-1 py-2 px-3 text-center rounded min-h-14', it.cls, i % 2 === 0 ? '' : ''])}>
              <div className='text-xs'>{text(it.tKey)}</div>
              <div className='text-base font-bold'>{info[it.vKey]}</div>
            </div>
          </div>
        ))}
      </div>
      <div className='py-3 px-4 text-xs bg-lg-9 rounded my-3'>
        <div className='text-color-21 text-base my-2 text-center'>{text('text_161')}</div>
        <div className='text-desc my-2 text-center'>{text('text_155')}</div>
        <div className='text-black py-1 px-2 text-center bg-body rounded min-h-5'>{inviteUrl || '--'}</div>
        <div className='flex items-center justify-between gap-2.5 text-white mt-4'>
          <div className='bg-lg-8 flex-1 text-center py-2 rounded' onClick={onOpen}>
            {text('text_156')}
          </div>
          <div className='bg-color-22 flex-1 text-center py-2 rounded flex items-center justify-center' onClick={onCopy}>
            <CopyOutlined className='text-sm mr-1' />
            {text('text_157')}
          </div>
        </div>
      </div>

      <div className='text-color-21 text-base mt-4 mb-2 text-center'>{text('text_162')}</div>
      <div className='py-3 px-4 bg-lg-9 rounded my-2 flex items-center'>
        <Img className='w-10 h-10' src={png01} />
        <div className='ml-6'>
          <div className='text-sm'>{text('text_163')}</div>
          <div className='text-lg font-bold text-color-23'>{info?.CommTotal}</div>
        </div>
      </div>
      <div className='py-3 px-4 bg-lg-9 rounded my-2 flex items-center'>
        <Img className='w-10 h-10' src={png04} />
        <div className='ml-6'>
          <div className='text-sm'>{text('text_164')}</div>
          <div className='text-lg font-bold text-color-23'>{info?.TaskComm}</div>
        </div>
      </div>
      <Dialog open={open} onClose={onClose} direction='center'>
        <div className='rounded-3xl mx-6 relative'>
          <CloseOutlined className='p-3 absolute right-0 top-0 text-white text-sm' onClick={onClose} />
          <Img className='w-full' src={bgPng01} />
          <div className='bg-white rounded-lg -mt-4 min-h-32 relative pt-6 pb-3'>
            <QRCode classNames={{ box: 'flex justify-center' }} value={inviteUrl} size={120} includeMargin={false} />
            <div className='bg-lg-8 flex-1 text-sm text-center py-1 text-white mt-4 mx-3 rounded'>{text('text_161')}</div>
          </div>
        </div>
      </Dialog>
    </div>
  );
}

export default observer(AllInfo);
